/**
 * 自定义指令 复制指令
 * vueuse
 * 使用Demo：
 * <template>
 *    <a href="#" v-copy="'test'">删除</a>
 * </template>
 */
import { ElMessage } from "element-plus";
import { useClipboard } from "@vueuse/core";
import type { ObjectDirective, DirectiveBinding } from "vue";

interface IMyInterface extends HTMLElement {
	copy: (text: string) => Promise<void>;
}
const vCopy: ObjectDirective = {
	mounted(el: IMyInterface, binding: DirectiveBinding) {
		const { value } = binding;
		const { copy } = useClipboard({ legacy: true, copiedDuring: 1000, read: true });
		el.copy = copy;
		el.addEventListener("click", () => {
			el.copy(value);
			ElMessage.success("复制成功");
		});
	},

	unmounted(el) {
		el.removeEventListener("click", el.copy);
	},
};

export default {
	name: "copy",
	...vCopy,
};
